<template>
  <div>
    <input type="text" v-model="state.mytext">
    <button @click="handleAdd">add</button>
    <ul>
      <li v-for="(todo, index) in state.todolist" :key="index">
        {{ todo }}<button @click="handleDel(index)">del</button>
      </li>
    </ul>
  </div>
</template>
<script>
import { reactive, ref } from 'vue'

export default {
  setup () {
    const state = reactive({
      mytext: '',
      todolist: ['111', '222', '333']
    })
    const handleAdd = () => {
      if (!state.mytext.trim().length) return
      state.todolist.unshift(state.mytext)
      state.mytext = ''
    }
    const handleDel = (index) => {
      state.todolist.splice(index, 1)
    }
    return {
      state,
      handleAdd,
      handleDel
    }
  }
}
</script>
